import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import '../../../app_files.dart';
import 'dart:io';
import 'action.dart';
import 'state.dart';

const double kOrderImageWidth = 90;

Widget buildView(
    InstallViewState state, Dispatch dispatch, ViewService viewService) {
  const List<String> titles = [
    '姓名',
    '联系方式',
    '报装小区',
    '报装地址',
    '身份证号码',
    '支付方式',
    '报装金额',
  ];

  List<TextEditingController> inputTexts = [
    state.nameTextController,
    state.phoneTextController,
    null,
    state.addressTextController,
    state.idCardTextController,
    null,
    state.moneyTextController,
  ];

  Widget _infoWidget() {
    List<Widget> _items() {
      Widget _rightWidget(int index) {
        if (index == 2) {
          return InkWell(
            child: state.communityInfo == null
                ? Text(
                    '请选择报装小区',
                    style: TextThemeConfig.Font14WithColor99,
                  )
                : Text(
                    state.communityInfo.name,
                    style: TextThemeConfig.Font14WithColor22,
                  ),
            onTap: () => dispatch(InstallViewActionCreator.onCommunityTap()),
          );
        }
        if (index == 5)
          return InkWell(
            child: state.payTay == null
                ? Text(
                    '请选择支付方式',
                    style: TextThemeConfig.Font14WithColor99,
                  )
                : Text(
                    state.payTay.typeName,
                    style: TextThemeConfig.Font14WithColor22,
                  ),
            onTap: () => dispatch(InstallViewActionCreator.onPayTypeTap()),
          );
        return TextField(
          controller: inputTexts[index],
          style: TextThemeConfig.Font14WithColor22,
          keyboardType: index == 6
              ? TextInputType.numberWithOptions(decimal: true)
              : null,
          decoration: InputDecoration(
            border: InputBorder.none,
            hintText: "请输入${titles[index]}",
            hintStyle: TextThemeConfig.Font14WithColor99,
          ),
        );
      }

      List<Widget> widgets = titles.map<Widget>((e) {
        int index = titles.indexOf(e);
        return Container(
          height: 49,
          decoration: BoxDecoration(
            border: Border(bottom: BorderSide(color: ThemeConfig.separeColor)),
          ),
          child: Row(
            children: [
              Container(
                width: 100,
                child: Text(
                  e,
                  style: TextThemeConfig.Font14WithColor22,
                ),
              ),
              Expanded(
                child: state.isDetail
                    ? Text(
                        state.model.getValueList()[index],
                        style: TextThemeConfig.Font14WithColor22,
                      )
                    : _rightWidget(index),
              ),
              (index == 2 || index == 5) && !state.isDetail
                  ? Image.asset('images/right_arrow.png')
                  : Container(),
            ],
          ),
        );
      }).toList();

      return widgets;
    }

    return Container(
      padding: EdgeInsets.only(left: 15, right: 15),
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
              bottom: BorderSide(color: ThemeConfig.separeColor, width: 10))),
      child: Column(
        children: _items(),
      ),
    );
  }

  Widget _orderPhotoWidget() {
    return state.isDetail && state.orderPhoto.length == 0
        ? Container()
        : Container(
            padding: EdgeInsets.only(left: 15, right: 15),
            decoration: BoxDecoration(
                color: Colors.white,
                border: Border(
                    bottom:
                        BorderSide(color: ThemeConfig.separeColor, width: 10))),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  height: 44,
                  child: Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      '拍照留存',
                      style: TextThemeConfig.Font16WithColorBold22,
                    ),
                  ),
                  margin: EdgeInsets.only(bottom: 4),
                ),
                Container(
                  margin: EdgeInsets.only(bottom: 12),
                  height: kOrderImageWidth,
                  child: ListView.builder(
                    itemBuilder: (BuildContext context, int index) {
                      if (index == state.orderPhoto.length) {
                        return InkWell(
                          child: Container(
                            margin: EdgeInsets.only(right: 12),
                            width: kOrderImageWidth,
                            height: kOrderImageWidth,
                            color: Color(0xffF5F5F5),
                            child: Align(
                              child: Image.asset('images/icon_camera.png'),
                            ),
                          ),
                          onTap: () =>
                              dispatch(InstallViewActionCreator.onTapAddPic()),
                        );
                      } else {
                        var file = state.orderPhoto[index];
                        return InkWell(
                          child: Container(
                            margin: EdgeInsets.only(right: 12),
                            child: file is File
                                ? Image(
                                    image: FileImageEx(file),
                                    width: kOrderImageWidth,
                                    height: kOrderImageWidth,
                                    fit: BoxFit.fill,
                                  )
                                : CustomImage(
                                    file,
                                    fit: BoxFit.fill,
                                    width: kOrderImageWidth,
                                    height: kOrderImageWidth,
                                  ),
                          ),
                          onTap: () =>
                              dispatch(InstallViewActionCreator.onTapPic(file)),
                        );
                      }
                    },
                    itemCount: state.isDetail
                        ? state.orderPhoto.length
                        : state.orderPhoto.length + 1,
                    scrollDirection: Axis.horizontal,
                    itemExtent: kOrderImageWidth + 12,
                    padding: EdgeInsets.only(),
                  ),
                )
              ],
            ),
          );
  }

  Widget _confirmButton() {
    if (state.isDetail) return Container();
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 15, vertical: 40),
      height: 50,
      decoration: BoxDecoration(
        color: ThemeConfig.mainColor,
        borderRadius: BorderRadius.all(Radius.circular(4)),
      ),
      child: InkWell(
        child: Align(
          child: Text(
            '提交',
            style: TextThemeConfig.Font16WithWhite,
          ),
        ),
        onTap: () => dispatch(InstallViewActionCreator.onSubmit()),
      ),
    );
  }

  return Scaffold(
    appBar: myAppBar(viewService.context,
        title: state.itemID != null ? '报装详情' : '预约报装'),
    body: (state.isDetail && state.model == null)
        ? MyLoadingWidget()
        : GestureDetector(
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  _infoWidget(),
                  _orderPhotoWidget(),
                  _confirmButton(),
                ],
              ),
            ),
            onTap: () => CommonUtils.closeKey(viewService.context),
            behavior: HitTestBehavior.translucent,
          ),
  );
}
